<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>你的个人待办清单</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <style>
    	#topnav{
    		font-size: 1.35em;
    		padding-left:5em;
    		padding-right: 5em;
    		height: 2.5em;
    	}
    	.no-underline>tr>td>a:hover{
    		text-decoration: none;
    	}
    	#line-through{
    		text-decoration: line-through;
    	}
    	#nav input{
    		width:39em !important;
    	}
    </style>

  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4" id='topnav'>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">待办清单</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'todolist:关于' %}">关于本站</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0" col-7 method='POST' action="{% url 'todolist:主页' %}">
          {% csrf_token %}
          <input name="item" class="form-control mr-sm-2" type="text" placeholder="待办事项" aria-label="Search">
          <button class="btn btn-outline-success mr-5 my-2 my-sm-0" type="submit">添加</button>
        </form>
      </div>
    </nav>

	<main role="main" class='container'>
		<br>
		<div class="table-responsive">
      {% if warn %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong><center style='font-size:1.25em'>{{ warn }}</center></strong> 
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      {% endif %} 
      {% if msg %}
        <div class="alert alert-primary alert-dismissible fade show" role="alert">
          <strong><center style='font-size:1.25em'>{{ msg }}</center></strong> 
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      {% endif %}
			<table class="table table-hover">
			  <thead class='thead-light'>
			    <tr>
			      <th scope="col">序号</th>
			      <th scope="col">待办事项</th>  
			      <th scope="col">编辑</th>
			      <th scope="col">划掉</th>
			      <th scope="col">删除</th>
			    </tr>
			  </thead>
      {% for i in itemlist %}
        {% if i.done == 0 %}
          <tbody class="no-underline">
          <tr>
            <th scope="row">{{ forloop.counter }}</th>
            <td>{{ i.thing }}</td>
            <td>
              <form method="POST" action="{% url 'todolist:编辑' i.id %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary btn-sm">编辑</button>
              </form>
            </td>
            <td>
            <form method="POST" action="{% url 'todolist:划掉' i.id %}">
              {% csrf_token %}
              <input name="已完成" type="hidden" value="T">
              <button type="submit" class="btn btn-primary btn-sm">划掉</button>
            </form>
            </td>
            <td>
              <button type="button" class="btn btn-primary btn-sm"data-toggle="modal" data-target="#exampleModal{{ i.id }}">删除</button>
              <div class="modal fade" id="exampleModal{{ i.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModal{{ i.id }}Label" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModal{{ i.id }}Label">请确认</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      确定要删除未完成事项：<strong>{{ i.thing }}</strong> 吗？  
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                      <form action="{% url 'todolist:删除' i.id %}" method="POST">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-primary">确认删除</button>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        {% else %}
          <tbody class="no-underline">
          <tr class="table-dark">
            <th class="text-dark" scope="row">{{ forloop.counter }}</th>
            <td class="text-dark" id="line-through">{{ i.thing }}</td>
            <td class="text-secondary">不可编辑</td>
            <td class="text-secondary">
            <form action="{% url 'todolist:划掉' i.id %}" method="POST">
              {% csrf_token %}
              <input name="已完成" type="hidden" value="F">
              <button type="submit" class="btn btn-primary btn-sm">撤销</button>
            </form>
            </td>
            <td>
              <form action="{% url 'todolist:删除' i.id %}" method="POST">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger btn-sm">删除</button>
              </form>
            </td>
          </tr>
          </tbody>
        {% endif %}
      {% endfor %}
	</main>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>
</html>
